<template>
    <div class="app-container">
        <el-card class="box-card components-container">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="单元名称">
                    {{ form.name }}
                </el-form-item>
                <el-form-item label="所属课程">
                    {{ form.courseName }}
                </el-form-item>

                <el-form-item label="单元简介">
                    <editor v-model="form.remark" :min-height="10" disabled />
                    <!-- <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 10 }" v-model="form.remark"
                        readonly></el-input> -->
                </el-form-item>
                <el-form-item label="创建人">
                    <el-input v-model="form.creatorName" readonly></el-input>
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-input v-model="form.createTime" readonly></el-input>
                </el-form-item>
                <el-form-item label="是否有效">
                    <template slot-scope="scope">
                        <el-switch v-model="form.validFlag" :active-value="1" :inactive-value="0" disabled></el-switch>
                    </template>
                </el-form-item>

                <el-form-item label="已有任务">
                </el-form-item>
                <el-card class="box-card components-container">
                    <el-table v-loading="loading" :data="form.ttaskInfoVos">
                        <el-table-column label="主键" width="55" align="center" prop="id" />
                        <el-table-column label="任务名称" align="center" prop="name" />
                        <el-table-column label="任务描述" align="center" prop="remark">
                            <template slot-scope="scope">
                                <div v-if='scope.row.remark && (scope.row.remark.length > 10)'>
                                    <el-popover title="详细" trigger="hover" placement="top" width="200">
                                        <p>{{ scope.row.remark }}</p>
                                        <div slot="reference">
                                            <p size="medium">{{ scope.row.remark | remark }}</p>
                                        </div>
                                    </el-popover>
                                </div>
                                <div v-else>
                                    <span>{{ scope.row.remark }}</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="结果代码" align="center" prop="resultCode">
                            <template slot-scope="scope">
                                <div v-if='scope.row.resultCode && (scope.row.resultCode.length > 10)'>
                                    <el-popover title="详细" trigger="hover" placement="top" width="200">
                                        <p>{{ scope.row.resultCode }}</p>
                                        <div slot="reference">
                                            <p size="medium">{{ scope.row.resultCode | resultCode }}</p>
                                        </div>
                                    </el-popover>
                                </div>
                                <div v-else>
                                    <span>{{ scope.row.resultCode }}</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="效果图片" align="center" prop="resultImage" width="100">
                            <template slot-scope="scope">
                                <image-preview :src="scope.row.resultImage" :width="50" :height="50" />
                            </template>
                        </el-table-column>
                        <el-table-column label="创建人" align="center" prop="creatorName" />
                        <el-table-column label="课程状态" align="center" prop="validFlag">
                            <template slot-scope="scope">
                                <!-- 用active-value="1" inactive-value="0"时的active-value值类型为string，如果要求active-value值类型为number时，必须在其前面加上冒号(:)来转换 -->
                                <el-switch v-model="scope.row.validFlag" :active-value="1" :inactive-value="0"
                                    @change="handleValidFlagChange(scope.row)"></el-switch>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column label="任务描述" align="center" prop="remark" /> -->
                        <el-table-column label="创建时间" align="center" prop="createTime" />
                        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                            <template slot-scope="scope">
                                <!-- <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                                    v-hasPermi="['student:task:edit']">修改</el-button> -->
                                <el-button size="mini" type="text" icon="el-icon-folder-opened"
                                    @click="handleView(scope.row)" v-hasPermi="['student:task:view']">详情</el-button>
                                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                                    v-hasPermi="['student:task:remove']">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-form>
        </el-card>

    </div>
</template>
  
<script>
import { getUnit } from "@/api/student/unit";
import {  delTask } from "@/api/student/task";
export default {
    name: "unitDetail",
    data() {
        return {
            form: {
                name: '',
                courseName: '',
                creatorName: '',
                createTime: '',
                remark: '',
                validFlag: '',
                ttaskInfoVos: []
            },
            loading: false
        };
    },
    created() {
        this.getUnitDetail();
    },
    watch: {
        '$route.params': {
            immediate: true,
            handler() {
                console.log(this.$route.name);
                if (this.$route.name == 'unitDetail') {
                    this.getUnitDetail();
                }
            }
        }
    },
    methods: {
        getUnitDetail() {
            var id = this.$route.query.id
            getUnit(id).then(response => {
                this.form = response.data;
                console.log(this.form);
            });
        },
        /** 详情按钮操作 */
        handleView(row) {
            this.handleToDetailPage(row.id)
        },
        // 跳转到任务详情页面(路由跳转)
        handleToDetailPage(id) {
            this.$router.push({
                name: 'taskDetail',
                query: {
                    id: id
                },
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = row.id;
            this.$modal.confirm('是否确认删除任务编号为"' + ids + '"的数据项？').then(function () {
                return delTask(ids);
            }).then(() => {
                this.getUnitDetail();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => { });
        },
    },
    filters: {
        remark(value) {
            if (!value) {
                return
            } else {
                if (value.length > 10) {
                    var target = value.substr(0, 10) + '....'
                } else {
                    target = value
                }
                return target;
            }
        },
        resultCode(value) {
            if (!value) {
                return
            } else {
                if (value.length > 10) {
                    var target = value.substr(0, 10) + '....'
                } else {
                    target = value
                }
                return target;
            }
        },
    }
};
</script>
  